<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<view class="unactive-header">
				<view class="menu-box">
					<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'32rpx'}" :inactiveStyle="{color:'#666666',fontSize:'32rpx'}" :itemStyle="{height:'80rpx',padding:'0 80rpx'}" lineColor="#5F56EF" @click="selectItem"></uv-tabs>
				</view>
				<!-- 搜索框 -->
				<view class="unactive-search-box">
					<xh-search-bar v-model="keywords" @searchResult="searchResult"></xh-search-bar>
				</view>
				<view class="tip-box">
					<text>符合条件机具数：{{total}}台</text>
				</view>
			</view>
		</template>
		<view class="device-list">
			<view class="device-item" v-for="item in dataList" :key="item.id">
				<image src="/static/home/device_list_icon.png" mode="aspectFit"></image>
				<view class="device-item-info">
					<text>{{item.produceName}}-{{item.deviceTypeCode}}({{item.deviceNetworkType}})</text>
					<text>{{item.ksnNo}}</text>
				</view>
			</view>
		</view>
	</z-paging>

</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { useSystem } from '@/common/stores'
	import { getAbnormalDeviceList } from '@/common/api/api.js'
	// 分类菜单
	const menuList = ref([{ name: '未激活', type: '01' }, { name: '伪激活', type: '03' }])
	const pagingRef = ref(null)
	const dataList = ref([])
	const selectType = ref('01')
	const keywords = ref('')
	const total = ref(0)
	//选择未激活/伪激活
	const selectItem = (item) => {
		console.log(item)
		selectType.value = item.type
		pagingRef.value.reload()
	}
	const searchResult = ()=>{
		pagingRef.value.reload()
	}
	// 获取列表数据
	const queryList = async (pageNo) => {
		let params = {}
		params.assessmentType = selectType.value
		params.ksnNo = keywords.value
		const res = await getAbnormalDeviceList(params, pageNo)
		total.value = res.page.totalElements
		const list = res.result
		if (pageNo == 1) {
			dataList.value = []
		}
		dataList.value = [...dataList.value, ...list]
		pagingRef.value.completeByTotal(list, res.page.totalElements)
	}
</script>

<style lang="scss" scoped>
	.unactive-header {
		background-color: $xh-bg-color;
		margin-top: 1px;

		.menu-box {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fff;
		}

		.unactive-search-box {
			padding: 30rpx 30rpx 0;
		}

		.tip-box {
			color: $xh-color-9;
			font-size: 24rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
		}
	}

	.device-list {
		padding: 0rpx 30rpx;

		.device-item {
			display: flex;
			align-items: center;
			background-color: #fff;
			padding: 30rpx;
			border-radius: 16rpx;
			margin-bottom: 20rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.device-item-info {
				display: flex;
				flex-direction: column;
				margin-left: 20rpx;
				font-size: 28rpx;

				text:nth-child(2) {
					color: $xh-color-6;
					font-size: 26rpx;
					margin-top: 16rpx;
				}
			}
		}
	}
</style>